<template>
  <div class="app-container">
    <el-row :gutter="20" class="header">
      <el-col :span="7">
        <el-input placeholder="请输入导师或学生姓名..." v-model="queryForm.query" clearable></el-input>
      </el-col>
      <el-col :span="4">
        <el-select v-model="queryForm.status" @change="initAllList"  placeholder="全部">
          <el-option label="全部" value="" selected />
          <el-option label="未选择" value="1" />
          <el-option label="已选择" value="2" />
        </el-select>
      </el-col>
      
      <el-button type="primary" :icon="Search" @click="initAllList">搜索</el-button>
      <el-button type="primary" :icon="Download" @click="downloadFile">下载</el-button>
    </el-row>
    <el-table :data="tableData" @selection-change="handleSelectionChange" stripe style="width: 100%">
      <el-table-column type="selection" width="55" />
      <!-- <el-table-column prop="avatar" label="头像" width="80" align="center">
          <template v-slot="scope">
            <img :src="getServerUrl() + 'media/userAvatar/' + scope.row.avatar" width="50" height="50" />
          </template>
</el-table-column> -->
      <el-table-column prop="stu_name" label="学生" width="200" align="center" />
      <el-table-column prop="teacher_name" label="导师" width="200" align="center" />
      <el-table-column prop="type" label="(专/学硕)" width="200" align="center" />
      <el-table-column prop="directions" label="研究方向" align="center" />

      <!-- <el-table-column prop="action" label="操作" fixed="right" align="center"> -->
      <!-- <template v-slot="scope"> -->
      <!-- <el-button type="primary" :icon="Tools" @click="handleRoleDialogValue(scope.row.stu_id, scope.row.roleList)">分配角色
            </el-button> -->
      <!-- 重置密码 -->
      <!-- <el-popconfirm v-if="scope.row.username != 'python222'" title="您确定要对这
    个用户重置密码吗？" @confirm="handleResetPassword(scope.row.stu_id)">
              <template #reference>
                <el-button type="warning" :icon="RefreshRight">重置密码</el-button>
              </template>
    </el-popconfirm> -->
      <!-- <el-popconfirm :title="confirm_title" @confirm="delSelectStu(scope.row)">
                        <template #reference>
                            <el-button type="danger" :icon="Remove" @click="changeTitle(scope.row)" >退选</el-button>
                        </template>
                    </el-popconfirm> -->
      <!-- </template> -->
      <!-- </el-table-column> -->
    </el-table>

    <el-pagination v-model:currentPage="queryForm.pageNum" v-model:page-size="queryForm.pageSize"
      :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>

</template>
<script setup>
import { Search, Delete, DocumentAdd, Position, Remove, Download } from '@element-plus/icons-vue'
import { ref } from 'vue'

// 请求api
import { getSelectAll, handleDelSelectStu, exportSelectAll } from "@/api/stu_teacher"
// 公共方法
import { toast, toast_msg } from '@/util/util'


// 用户
let user = JSON.parse(sessionStorage.getItem("currentUser"))


// 退选
const confirm_title = ref("确认退选学生吗？")
const changeTitle = (row) => {
  if (row.stu_name) {
    confirm_title.value = "确认退选学生 " + row.stu_name + " 吗？"
  } else {
    confirm_title.value = "确认退选学生吗？"
  }
}



// 列表数据
const tableData = ref([])
const total = ref(0)
const queryForm = ref({
  query: '',
  status:"",
  pageNum: 1,
  pageSize: 10
})

// 初始化双选列表
const initAllList = async () => {
  const res = await getSelectAll(queryForm.value)
  tableData.value = res.data.selectResList;
  total.value = res.data.total;
}
initAllList();
const handleSizeChange = (pageSize) => {
  queryForm.value.pageNum = 1;
  queryForm.value.pageSize = pageSize;
  initAllList()
}
const handleCurrentChange = (pageNum) => {
  queryForm.value.pageNum = pageNum;
  initAllList()
}



const downloadFile = async () => {
  try {
    const response = await exportSelectAll({}).then((res) => {
      console.log(res)
    }).catch()

    // const url = window.URL.createObjectURL(new Blob([response.data]));
    // const link = document.createElement('a');
    // link.href = url;
    // link.setAttribute('download', 'example.xlsx');
    // document.body.appendChild(link);
    // link.click();
    // document.body.removeChild(link);
  } catch (error) {
    toast('下载失败', 'error')
  }
};


</script>

<style lang="scss" scoped>
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}

.el-pagination {
  float: right;
  padding: 20px;
  box-sizing: border-box;
}

::v-deep th.el-table__cell {
  word-break: break-word;
  background-color: #f8f8f9 !important;
  color: #515a6e;
  height: 40px;
  font-size: 13px;
}

.el-tag--small {
  margin-left: 5px;
}
</style>